<template>
  <div class="ml-2 flex-1">
    <div class="w-full">
      <a-card :bordered="false" style="height: 830px; width: 1380px">
        <a-segmented v-model:value="value" :options="data" />

        <div class="mt-5">
          <arrears
            :select-value="value"
            v-if="value === '欠费信息'"
            :selectedNodeId="props.selectedNodeId"
          />
          <received
            :select-value="value"
            v-if="value === '已收信息'"
            :selectedNodeId="props.selectedNodeId"
          />
          <exemption
            :select-value="value"
            v-if="value === '应收减免'"
            :selectedNodeId="props.selectedNodeId"
          />
          <liquidated
            :select-value="value"
            v-if="value === '违约金减免'"
            :selectedNodeId="props.selectedNodeId"
          />
          <supply
            :select-value="value"
            v-if="value === '停供信息'"
            :selectedNodeId="props.selectedNodeId"
          />
          <Invoicing
            :select-value="value"
            v-if="value === '开票信息'"
            :selectedNodeId="props.selectedNodeId"
          />
          <attachment
            :select-value="value"
            v-if="value === '附件信息'"
            :selectedNodeId="props.selectedNodeId"
          />
        </div>
      </a-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, h } from "vue";
import { SearchOutlined, CodeSandboxOutlined } from "@ant-design/icons-vue";
import arrears from "./perssonal/arrears.vue";
import received from "./perssonal/received.vue";
import exemption from "./perssonal/exemption.vue";
import liquidated from "./perssonal/liquidated.vue";
import Invoicing from "./perssonal/invoicing.vue";
import attachment from "./perssonal/attachment.vue";
import supply from "./perssonal/supply.vue";

const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const data = reactive([
  "欠费信息",
  "已收信息",
  "应收减免",
  "违约金减免",
  "停供信息",
  "开票信息",
  "附件信息",
]);
const value = ref("欠费信息");
</script>
<style scoped>
:deep(.ant-segmented-item-selected) {
  font-weight: bold;
  color: #006be6;
}
</style>
